<template>
  <div style="height: 100%; padding: 10px">
<!--    <transition name="fortune-zoom-in-top" mode="in-out">-->
<!--    </transition>-->
    <a-row :gutter="[16, 16]" align="top" justify="start" type="flex">
      <a-col :span="24">
        <a-card class="a-card-beautiful">
          <a-row align="middle" type="flex" justify="space-between">
            <a-col>
              <a-badge v-if="isConnected" status="success" text="已连接到造化玉碟"></a-badge>
              <a-badge v-else status="error" text="未连接到造化玉碟"></a-badge>
              <a-divider class="fortune-divider" type="vertical"></a-divider>
              <a-badge v-if="isConnected" status="success" text="已连接到造化玉碟"></a-badge>
              <a-badge v-else status="error" text="未连接到造化玉碟"></a-badge>
            </a-col>
            <a-col>
              <a-space>
                <a-button type="primary" @click="initConnection">重新连接</a-button>
                <a-button type="primary" @click="initConnection">重新连接</a-button>
                <a-button type="primary" @click="initConnection">重新连接</a-button>
                <a-button type="primary" @click="initConnection">重新连接</a-button>
                <a-button type="primary" @click="initConnection">重新连接</a-button>
              </a-space>
            </a-col>
          </a-row>
        </a-card>
      </a-col>
      <a-col :span="12">
        <a-card class="a-card-beautiful">
          <template #title>
            <a-space>
              <a-button @click="doSearch" type="primary">
                <template #icon>
                  <search-outlined/>
                </template>
                执行搜索
              </a-button>
              <a-button>
                <template #icon>
                  <redo-outlined/>
                </template>
                重置表单
              </a-button>
            </a-space>
          </template>
          <a-form layout="inline" :model="findSeedParam.baseParam">
            <a-form-item>
              <a-input
                  :min="formConfig.seedId.min"
                  :max="formConfig.seedId.max"
                  type="number"
                  class="a-input-base-param seed-input"
                  v-model:value="findSeedParam.baseParam.seedId">
                <template #prefix>
                  <a-tag color="blue">{{ formConfig.seedId.tagName }}</a-tag>
                </template>
                <template #suffix>
                  <popover-question-circle :popover-content="parseNumberPopoverTip(formConfig.seedId)"/>
                </template>
              </a-input>
            </a-form-item>
            <a-form-item>
              <a-input :min="formConfig.numberPerSearch.min" :max="formConfig.numberPerSearch.max" type="number" class="a-input-base-param" v-model:value="findSeedParam.baseParam.numberPerSearch">
                <template #prefix>
                  <a-tag color="blue">{{ formConfig.numberPerSearch.tagName }}</a-tag>
                </template>
                <template #suffix>
                  <popover-question-circle :popover-content="parseNumberPopoverTip(formConfig.numberPerSearch)"/>
                </template>
              </a-input>
            </a-form-item>
            <a-form-item>
              <a-input :min="formConfig.searchCount.min" :max="formConfig.searchCount.max" type="number" class="a-input-base-param" v-model:value="findSeedParam.baseParam.searchCount">
                <template #prefix>
                  <a-tag color="blue">{{ formConfig.searchCount.tagName }}</a-tag>
                </template>
                <template #suffix>
                  <popover-question-circle :popover-content="parseNumberPopoverTip(formConfig.searchCount)"/>
                </template>
              </a-input>
            </a-form-item>
            <a-form-item>
              <a-input :min="formConfig.starNumber.min" :max="formConfig.starNumber.max" type="number" class="a-input-base-param star-select" v-model:value="findSeedParam.baseParam.starNumber">
                <template #prefix>
                  <a-tag color="blue">{{ formConfig.starNumber.tagName }}</a-tag>
                </template>
                <template #suffix>
                  <popover-question-circle :popover-content="parseNumberPopoverTip(formConfig.starNumber)"/>
                </template>
              </a-input>
            </a-form-item>
          </a-form>
          <a-divider>
            <a-tag color="blue">基础检索条件
            </a-tag>
            <a-popover>
              <template #content>
                <a-typography>
                  <a-typography-text>基础检索条件是全部必填的</a-typography-text>
                </a-typography>
              </template>
              <question-circle-two-tone class="tip-icon" twoToneColor="#faad14"/>
            </a-popover>
          </a-divider>
        </a-card>
      </a-col>
      <a-col :span="12">
        <a-card class="a-card-beautiful" style="height: 100%">
          <template #title>
            <a-tag>搜索结果</a-tag>
          </template>
          <div v-if="searchResult"></div>
          <div v-else>
            <transition name="fade" mode="out-in">
              <a-skeleton v-if="searchResultLoading" active/>
              <a-empty v-else></a-empty>
            </transition>
          </div>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import {SearchOutlined,RedoOutlined,QuestionCircleTwoTone} from '@ant-design/icons-vue';
import PopoverQuestionCircle from '../../components/tip/PopoverQuestionCircle';
import db from '../../store';
import { notification,message } from 'ant-design-vue';

export default {
  name: "SeedFilter",
  components: {
    SearchOutlined,
    RedoOutlined,
    QuestionCircleTwoTone,
    PopoverQuestionCircle
  },
  setup () {
    return {
      labelCol: { span: 0 },
      wrapperCol: { span: 14 },
      formConfig: require('../../assets/config/form/findSeedForm.json')
    }
  },
  data () {
    return {
      findSeedParam: {
        baseParam: {
          seedId: 0,
          numberPerSearch: 1000,
          searchCount: 100,
          starNumber: 64
        }
      },
      searchResultLoading: false,
      searchResult: undefined,
      findSeedApi: undefined,
      readyState: undefined
    }
  },
  methods: {
    doSearch() {
      this.searchResultLoading = true
      setTimeout(() => {
        this.searchResultLoading = false
      }, 2000)
    },
    parseNumberPopoverTip(fieldConfig) {
      return fieldConfig.title + '，' + fieldConfig.min + '~' + fieldConfig.max;
    },
    initConnection() {
      let webSocket = new WebSocket(db.getters.fortuneUrl + 'account');
      webSocket.onerror = (e) => {
        message.error(`种子检索接口连接失败：${e.data}`)
        this.readyState = webSocket.readyState;
      };
      webSocket.onclose = (e) => {
        notification.info({message: `种子检索接口连接关闭：${e.data}`});
        this.readyState = webSocket.readyState;
      };
      webSocket.onopen = () => {
        notification.success({message: "种子检索接口连接成功"});
        this.readyState = webSocket.readyState;
      };
      webSocket.onmessage = (e) => {
        notification.success({message: '收到消息'});
        this.readyState = webSocket.readyState;
        console.log(e.data)
      }
      this.findSeedApi = webSocket;
    }
  },
  computed: {
    isConnected () {
      return this.readyState && this.readyState === 1;
    }
  },
  mounted() {
    if (this.$store.getters.autoLink) {
      console.log("初始化接口")
      this.initConnection();
    }
  }
}
</script>

<style scoped>
.a-input-base-param {
  width: 190px;
}
.seed-input {
  width: 190px;
}
.tip-icon {
  color: rgba(0, 0, 0, 0.25);
  font-size: 12px;
}
.star-select {
  width: 150px;
}
</style>
